<script setup lang="ts">
// 从 vue 引入 ref 函数，用于创建响应式变量
import { ref } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

/**
 * 定义任务对象的接口
 * @interface Task
 * @property {number} id - 任务的唯一标识
 * @property {string} content - 任务的内容
 */
interface Task {
  id: number;
  content: string;
  date: string;
}

/**
 * 获取未执行任务的假数据
 * @returns {Task[]} 未执行任务数组
 */
const getUnExecutedTasks = () => {
  return [
    { id: 1, content: "制定项目开发计划", date: "2025-06-30" },
    { id: 2, content: "搭建项目基础架构", date: "2025-06-30" },
    { id: 3, content: "设计数据库表结构", date: "2025-06-30" },
    { id: 4, content: "配置持续集成环境", date: "2025-06-30" },
    { id: 5, content: "编写项目部署文档", date: "2025-06-30" },
    { id: 6, content: "准备项目启动会议资料", date: "2025-06-30" },
  ];
};

/**
 * 获取执行中任务的假数据
 * @returns {Task[]} 执行中任务数组
 */
const getInProgressTasks = () => {
  return [
    { id: 1, content: "进行接口联调测试", date: "2025-06-30" },
    { id: 2, content: "开发新功能模块", date: "2025-06-30" },
    { id: 3, content: "与设计团队沟通页面优化", date: "2025-06-30" },
    { id: 4, content: "编写API文档", date: "2025-06-30" },
    { id: 5, content: "修复前端页面样式问题", date: "2025-06-30" },
    { id: 6, content: "进行性能分析和优化", date: "2025-06-30" },
  ];
};

/**
 * 获取已完成任务的假数据
 * @returns {Task[]} 已完成任务数组
 */
const getCompletedTasks = () => {
  return [
    { id: 1, content: "完成项目需求文档编写", date: "2025-06-30" },
    { id: 2, content: "修复登录模块的密码验证漏洞", date: "2025-06-30" },
    { id: 3, content: "优化首页加载速度", date: "2025-06-30" },
    { id: 4, content: "完成用户权限管理系统开发", date: "2025-06-30" },
    { id: 5, content: "编写系统单元测试用例", date: "2025-06-30" },
    { id: 6, content: "部署测试环境服务器", date: "2025-06-30" },
    { id: 7, content: "整理项目开发文档", date: "2025-06-30" },
    { id: 8, content: "完成数据库表结构优化", date: "2025-06-30" },
    { id: 9, content: "实现数据备份与恢复功能", date: "2025-06-30" },
    { id: 10, content: "完成移动端适配测试", date: "2025-06-30" },
  ];
};

// 响应式变量，存储未执行任务列表
const unExecutedTasks = ref(getUnExecutedTasks());
// 响应式变量，存储执行中任务列表
const inProgressTasks = ref(getInProgressTasks());
// 响应式变量，存储已完成任务列表
const completedTasks = ref(getCompletedTasks());

// 响应式变量，存储新任务输入内容
const newTaskContent = ref("");

// 获取当前最大的任务 ID
const getMaxTaskId = () => {
  const allTasks = [
    ...unExecutedTasks.value,
    ...inProgressTasks.value,
    ...completedTasks.value,
  ];
  return allTasks.reduce((max, task) => Math.max(max, task.id), 0);
};

/**
 * 添加新任务到未执行列
 */
const addNewTask = () => {
  if (newTaskContent.value.trim()) {
    const newTask: Task = {
      id: getMaxTaskId() + 1,
      content: newTaskContent.value.trim(),
      date: new Date().toISOString().split("T")[0],
    };
    unExecutedTasks.value.push(newTask);
    newTaskContent.value = "";
  }
};

// 响应式变量，存储所有任务，按任务状态分类
const tasks = ref({
  未执行: unExecutedTasks.value,
  执行中: inProgressTasks.value,
  已完成: completedTasks.value,
});

// 获取任务状态数组
const statusList = Object.keys(tasks.value);

/**
 * 移动任务到指定状态列
 * @param {Task} task - 要移动的任务
 * @param {string} currentStatus - 当前任务状态
 * @param {number} offset - 移动偏移量，-1 为左移，1 为右移
 */
const moveTask = (task: Task, currentStatus: string, offset: number) => {
  const currentIndex = statusList.indexOf(currentStatus);
  const newIndex = currentIndex + offset;

  if (newIndex >= 0 && newIndex < statusList.length) {
    const newStatus = statusList[newIndex];

    // 从原列移除任务
    const currentTaskList = tasks.value[currentStatus];
    const taskIndex = currentTaskList.findIndex((t) => t.id === task.id);
    if (taskIndex !== -1) {
      currentTaskList.splice(taskIndex, 1);
    }

    // 添加到目标列
    tasks.value[newStatus].push(task);
  }
};
</script>

<template>
  <div class="app-container">
    <div class="task-columns-container">
      <div
        v-for="(taskList, status) in tasks"
        :key="status"
        class="task-column"
        :class="status"
      >
        <h2>{{ status }}</h2>
        <div class="task-list">
          <div
            v-for="(task, index) in taskList"
            :key="task.id"
            class="task-item"
          >
            {{ index + 1 }}. {{ task.content }} {{ task.date.slice(-5) }}
            <div class="move-buttons">
              <button
                v-if="statusList.indexOf(status) > 0"
                @click="moveTask(task, status, -1)"
              >
                <el-icon><ArrowLeft /></el-icon>
              </button>
              <button
                v-if="statusList.indexOf(status) < statusList.length - 1"
                @click="moveTask(task, status, 1)"
              >
                <el-icon><ArrowRight /></el-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add-task-container">
      <input
        v-model="newTaskContent"
        @keyup.enter="addNewTask"
        class="add-task-input"
        placeholder="输入新任务，按回车添加"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
}

.task-columns-container {
  display: flex;
  flex: 1;
}

.task-column {
  flex: 1;
}

.task-list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.task-column h2 {
  text-align: center;
  color: black;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: black;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 15px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.task-item {
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.move-buttons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.move-buttons button {
  margin-left: 5px;
  cursor: pointer;
  background: none;
  border: none;
}

.add-task-container {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.add-task-input {
  width: 80%;
  padding: 12px 16px;
  border-radius: 24px;
  border: none;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  outline: none;
  transition: all 0.3s ease;

  &:focus {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
}

.未执行 {
  background-color: #ffcccc;
}

.执行中 {
  background-color: #fff3cc;
}

.已完成 {
  background-color: #ccffcc;
}
</style>
